<script lang="ts" setup>
import { type ArticleVO, getArticleDeployApi } from '@/request/api/article'
import type { ResultType } from '@/type/type'
import { RouteNameEnum } from '@/enum'

const router = useRouter()

const list = ref<ArticleVO[]>([])
onMounted(() => {
  getArticleDeployApi().then((res: ResultType<ArticleVO[]>) => {
    list.value = res.data
  })
})
</script>

<template>
  <el-carousel
    :autoplay="false"
    arrow="always"
    class="use-shadow use-radius h-full"
    height="100%"
    trigger="click"
  >
    <el-carousel-item v-for="item in list" :key="item.id" class="">
      <el-container class="size-full relative cursor-pointer">
        <ImageBox :lazy="false" :url="item.cover" />
        <span class="absolute flex flex-col gap-2 top-10 left-10">
          <span class="text-2xl font-semibold">{{ item.title }}</span>
          <SvgIcon :message="item.createTime.toString()" name="edit" />
        </span>
        <a
          class="absolute px-10 py-2 text-gray-50 bg-gray-500/50 use-hover-bg use-radius-xs use-transitions-shadow-short left-10 bottom-10"
          href="javascript:"
          @click="
            router.push({
              name: RouteNameEnum.ARTICLE_DETAIL,
              params: { id: item.id }
            })
          "
        >
          立即前往
        </a>
      </el-container>
    </el-carousel-item>
  </el-carousel>
</template>

<style lang="scss" scoped></style>
